<script lang="ts">
import Vue from 'vue'
import {getWageList, getCountData} from '@/api/wageCollection'

export default Vue.extend({
  name: 'index',
  data() {
    return {
      tableData: [],
      countData: {},
      sysFlag: '3',
      sysFlag3: true,
      sysFlag5: false
    }
  },
  created() {
    this.initData()
  },
  watch: {
    sysFlag3() {
      if (this.sysFlag3) {
        this.sysFlag = '3'
      } else {
        this.sysFlag = ''
      }
      if (this.sysFlag5) {
        this.sysFlag += '5'
      }
      this.tableData = []
      this.initData()
    },
    sysFlag5() {
      if (this.sysFlag5) {
        this.sysFlag = '5'
      } else {
        this.sysFlag = ''
      }
      if (this.sysFlag3) {
        this.sysFlag += '3'
      }
      this.tableData = []
      this.initData()
    }
  },
  methods: {
    initData() {
      let data = {
        page: {},
        param: {
          flag: this.sysFlag
        }
      }
      getWageList(data).then(res => {
        this.tableData = res
      })
      getCountData(data).then(res => {
        this.countData = res
      })
    }
  }
})
</script>

<template>
  <div>
    <div class="head-div-card">
      <el-card shadow="always" class="head-card">
        <div class="head-div">
          <div class="item-one bg-color-1">
            <span class="head-tip">未提交</span><br>
            <div class="item-pep-div">
              <span class="item-pep-num">{{ countData.unsubmitted }}</span>
              <span>人</span>
            </div>
          </div>
          <div class="item-one bg-color-2">
            <span class="head-tip">已提交</span><br>
            <div class="item-pep-div">
              <span class="item-pep-num">{{ countData.submitted }}</span>
              <span>人</span>
            </div>
          </div>
          <div class="item-one bg-color-3">
            <span class="head-tip">异常数据</span><br>
            <div class="item-pep-div">
              <span class="item-pep-num">166</span>
              <span>人</span>
            </div>
          </div>
          <div class="item-one bg-color-4">
            <span class="head-tip">正常数据</span><br>
            <div class="item-pep-div">
              <span class="item-pep-num">1666</span>
              <span>人</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="head-div-card">
      <el-card shadow="always" class="head-card">
        <div>
          <span>结算系统：</span>
          <el-switch
            v-model="sysFlag3"
            active-text="3.0数据打开"
            inactive-text="3.0数据关闭"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <el-switch
            v-model="sysFlag5"
            active-text="5.0数据打开"
            inactive-text="5.0数据关闭"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="margin-left: 5px"
          >
          </el-switch>
        </div>
      </el-card>
    </div>
    <div class="head-div-card">
      <el-card shadow="always" class="head-card body-card">
        <div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            height="calc(100vh - 410px)"
          >
            <el-table-column
              prop="coachName"
              label="教练姓名"
              fixed
            ></el-table-column>
            <el-table-column
              prop="vocabHours"
              label="词汇课课时"
              width="100"
              fixed
            ></el-table-column>
            <el-table-column
              prop="trialHours"
              label="体验课课时"
              width="100"
              fixed
            ></el-table-column>
            <el-table-column
              prop="otherHours"
              label="阅读完型语法听力写作课时"
              width="190"
              fixed
            ></el-table-column>
            <el-table-column
              prop="studentNames"
              label="成交学生姓名"
              width="110"
              fixed
            ></el-table-column>
            <el-table-column
              prop="dealBonus"
              label="成交奖金"
              fixed
            ></el-table-column>
            <el-table-column
              prop="penalty"
              label="扣除/惩罚"
              width="100"
              fixed
            ></el-table-column>
            <el-table-column
              prop="recommendBonus"
              label="推荐奖"
              fixed
            ></el-table-column>
            <el-table-column
              prop="totalCommission"
              label="应发放佣金"
              width="100"
              fixed
            ></el-table-column>
            <el-table-column
              prop="adminCoachName"
              label="教练姓名（系统统计）"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="adminVocabHours"
              label="词汇课课时（系统统计）"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="adminTrialHours"
              label="体验课课时（系统统计）"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="adminOtherHours"
              label="阅读完型语法听力写作课时（系统统计）"
              width="280"
            ></el-table-column>
            <el-table-column
              prop="adminStudentNames"
              label="成交学生姓名（系统统计）"
              width="190"
            ></el-table-column>
            <el-table-column
              prop="adminDealBonus"
              label="成交奖金（系统统计）"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="adminPenalty"
              label="扣除/惩罚（系统统计）"
              width="170"
            ></el-table-column>
            <el-table-column
              prop="adminRecommendBonus"
              label="推荐奖（系统统计）"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="adminTotalCommission"
              label="应发放佣金（系统统计）"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="flag"
              label="结算系统"
              fixed="right"
            ></el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.head-div {
  display: flex;
  justify-content: space-around;
}

.item-one {
  width: 16vw;
  height: 16vh;
  min-width: 100px;
  min-height: 150px;
  color: #ffffff;
  //font-size: 1.5em;
  font-size: clamp(14px, 3vw, 25px);
  border-radius: 20px;
  margin: 10px 10px 0 10px;

  .head-tip {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
  }

  .item-pep-div {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -20px;
  }

  .item-pep-num {
    //font-size: 3em;
    font-size: clamp(20px, 6vw, 60px);
    margin-right: 10px;
  }
}

.bg-color-1 {
  background-image: linear-gradient(45deg, #874da2 0%, #c43a30 100%)
}

.bg-color-2 {
  background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%)
}

.bg-color-3 {
  background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%)
}

.bg-color-4 {
  background-image: linear-gradient(0deg, #0ba360 0%, #3cba92 100%)
}

.head-card {
  margin-top: 20px;
  width: 98%;
  border-radius: 20px;
}

.head-div-card {
  display: flex;
  justify-content: center;
}

.body-card {
  height: calc(100vh - 390px);
}
</style>
